<template>
  <div>
      <el-page-header  @back="$router.push('/waybillmanagement')" content="运单详情" class="huidan" style="margin-bottom:20px">
         </el-page-header>
           <el-card>
            <el-row type="flex" justify="space-around" style="font-size: 14px; font-weight: 400;margin-bottom:20px;">
              <el-col>订单编号：{{form.orderId}}</el-col>
              <el-col>运单编号：{{form.id}}</el-col>
              <el-col v-if="form.order">下单时间：{{form.order.createTime}}</el-col>
              <el-col >订单状态：已签收</el-col>
            </el-row>
            <el-row style="font-size: 14px; font-weight: 400;">
              <el-col  v-if="form.order">预计到达日期：{{form.order.estimatedArrivalTime}}</el-col>
            </el-row>
        </el-card>
               <el-collapse  style="margin-top:20px" v-model="activeNames">
        <el-card >
  <el-collapse-item class="basic"  name="1">
    <template slot="title" ><span style="font-size: 16px;    font-weight: 700; color: rgb(42, 41, 41);">基本信息</span> </template>
    <el-row style="margin-top: 10px">
      <img src="../../../assets/yunshu.png" alt="" class="img-info1">
      <span class="fahuo">发货方</span>
    </el-row>
    <el-row type="flex" style="margin:20px 0 20px 38px;  ">
      <el-col v-if="form.order">发货方姓名：{{form.order.senderName}}</el-col>
      <el-col  v-if="form.order">发货方电话：{{form.order.senderPhone}}</el-col>
    </el-row>
    <el-row type="flex" style="margin-left:38px;margin-bottom:22px;">
      <el-col v-if="form.order">发货方地址：{{form.order.senderProvince.name+form.order.senderCity.name+form.order.senderCounty.name}}</el-col>
      <el-col v-if="form.order">  详细地址：{{form.order.senderAddress}}</el-col>
    </el-row>
     <el-row style="margin-top: 10px">
      <img src="../../../assets/shouhuofang.png" alt="" class="img-info2">
      <span class="fahuo">收货方</span>
    </el-row>
    <el-row type="flex" style="margin:20px 0 20px 38px;  ">
      <el-col v-if="form.order">收货方姓名：{{form.order.receiverName}}</el-col>
      <el-col v-if="form.order">收货方电话：{{form.order.senderPhone}}</el-col>
    </el-row>
    <el-row type="flex" style="margin-left:38px;">
      <el-col v-if="form.order">收货方地址：{{form.order.receiverProvince.name+form.order.receiverCity.name+form.order.senderCounty.name}}</el-col>
      <el-col v-if="form.order">  详细地址：{{form.order.receiverAddress}}</el-col>
    </el-row>
  </el-collapse-item>
<el-collapse-item class="basic"  name="2">
    <template slot="title" ><span style="font-size: 16px;    font-weight: 700; color: rgb(42, 41, 41);">运输信息</span> </template>
   <el-steps :space="300" :active="3" finish-status="finish" style="margin-top:20px;">
  <el-step description="" title="皇姑区营业部" icon="el-icon-circle-check" style="width: 40px;height: 40px;font-size: 20px;"></el-step>
  <el-step title="沈阳分拣中心" icon="el-icon-circle-check"></el-step>
  <el-step title="武昌营业部" icon="el-icon-circle-check"></el-step>
</el-steps>
<el-row type="flex" style="margin:20px 40px 0 50px;">
  <el-col class="info" >
    <el-row v-if="form.taskTransports">运输任务：{{form.taskTransports.id}}</el-row>
    <el-row v-if="form.taskTransports">车辆：{{form.taskTransports.actualArrivalTime}}</el-row>
    <el-row v-if="form.taskTransports">司机：{{form.taskTransports.drivers}}</el-row>
    <el-row v-if="form.taskTransports">到达时间：{{form.taskTransports.drivers}}</el-row>
  </el-col>
  <el-col class="info">
    <el-row>运输任务：</el-row>
    <el-row>车辆：</el-row>
    <el-row>司机：</el-row>
    <el-row>到达时间：</el-row>
  </el-col>
</el-row>
  </el-collapse-item>
<el-collapse-item class="basic"  name="3">
     <template slot="title" ><span style="font-size: 16px;font-weight: 700; color: rgb(42, 41, 41);">货品信息</span> </template>
         <el-table :data="tableData"   style="width: 100% " :header-cell-style="{background:'#f8faff',color:'#818693',}">
    <el-table-column type="index"  label="序号"  width="50"> </el-table-column>
    <el-table-column prop="name" label="货品名称" width="230"> </el-table-column>
    <el-table-column prop="goodsType.name" label="货品类型" width="230"> </el-table-column>
    <el-table-column prop="totalWeight" label="重量(千克)" width="230"> </el-table-column>
    <el-table-column prop="totalVolume" label="体积(立方)" width="260"> </el-table-column>
    <!-- <el-table-column  label="操作">
       <template #default="{row}">
         <el-button  type="text" @click="edit(row.id)">编辑</el-button>
         <el-divider direction="vertical" ></el-divider>
          <el-button style="color:red"  type="text" @click="del(row.id)">删除</el-button>
        </template>
       </el-table-column> -->
    <!-- <el-table-column prop="amount3"   > </el-table-column> -->
  </el-table>
  </el-collapse-item>
        </el-card>
</el-collapse>
  </div>
</template>

<script>
import { getWaybillInfo } from '@/api/waybillmanagement'
export default {
  name: 'waybillInfo',
  data () {
    return {
      form: {},
      activeNames: ['1', '2', '3'],
      tableData: [],
      userId: this.$route.params.id // 拿到id
    }
  },
  created () {
    this.getListInfo()
  },
  methods: {
    async getListInfo () {
      const res = await getWaybillInfo(this.userId)
      console.log(res)
      this.form = res.data
      this.tableData = res.data.order.orderCargoDTOS
    }
  }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-collapse-item__header  {
background-color: #f8faff;
  padding: 0;

}
// ::v-deep .el-collapse-item basic is-active {
//   padding: 0;
// }
.basic {
    color: rgb(42, 41, 41);
    background: rgb(248, 250, 255) !important;
}
.img-info1 {
  width: 14px;
    height: 18px;
    vertical-align: middle;
    margin-left: 2px;
}
.img-info2 {
  width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 2px;
}
.fahuo {
  font-size: 16px;
    font-family: PingFangSC-Regular, "PingFang SC";
    font-weight: 400;
    color: rgb(32, 35, 42);
    line-height: 28px;
    margin-left: 15px;
    /* margin-bottom: 15px; */
}
.el-collapse-item__header {
  background-color: #f8faff;
  height: 60px;
  line-height: 60px;
}
 .el-step__icon-inner ::v-deep el-icon-circle-check {
    width: 40px;
    height: 40px;
    font-size: 20px;
}
// ::v-deep .el-step__title is-finish {
//   padding-bottom: 20px;
// }
.info {
    background: #f4f8fc;
    border-radius: 8px;
    padding: 14px 15px;
    font-size: 14px;
    color: #20232a;
    font-weight: 400;
    width: 252px;
    margin-right: 35px;
}
::v-deep .el-table__header-wrapper {
  margin-top: 20px;
}
</style>
